<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tableau d'informations</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.nickron-renaissance.com/10861.js" type="text/javascript"></script>
<script>
$(function(){
    new showPannel(1,'pannel');
});
function showStaff(el,m,event){

	var x = event.clientX;
	var y = event.clientY;
	var info = $('.info');
	var element = el;
	switch(m){
		case 'angelique':
		case 'yoje':
		case 'karl' :
		case 'ambre' :
		case 'nolan' :
			info.show();
			$('ul.'+m).show();
		break;
		default:
			info.show();
			$('ul.'+m).show();
	}
	info.css({'top': y+'px', 'left':x+'px'});
	info.show();
	el.mousemove(function(e){
		info.css({'top': e.clientY+'px', 'left':e.clientX+'px'});
	})
	el.mouseout(function(){
			$('ul.'+m).hide();
			info.hide();
		});
}
function showPredef(predef){
	$('.predef .active').hide().removeClass('active');
	$('.predef .info ul').eq(predef+1).fadeIn('fast').addClass('active');
}
</script>
</head>
<style>
    body{background:#001212;font-family: Century Gothic;color:#FFF;margin:0}
    a{text-decoration:none;color:#00dcc5;}
    a:hover{color:#f5a700;}
    h2{margin:0;text-align:center;padding:0.83em 0;position:relative; text-shadow: 0.1em 0.1em 0.2em black}
    ul{list-style-type:none; padding:10px;}
    .show img.left, .show img.right{position:relative;top:0;}
    .show img.right{left:60%}
    .show .cadrenoir{margin:0.5em 10em;background:#161616;border:1px solid #000;padding:1em;font-size:12px;overflow:hidden;min-height:30em}
    hr{magin:0;border:none}
    .show{height:480px;background:#456161;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 5px; border: 1px solid #73b0a2;
    position:relative;z-index:0;margin-top:-5px;padding:10px;clear:both;}
    .pannel{width:950px;height:501px}
    .full{width:100%;height:100%;-moz-border-radius:5px; border-radius:5px;}
    .onglets{margin: 0;padding:0;overflow:hidden; list-style-type:none;}
    .onglets li{cursor:pointer;position:relative;z-index:0;background: url(http://pix.toile-libre.org/upload/original/1311883119.png) no-repeat; float:left;width:102px; height:26px;color: white;font-size: 14px;text-align: center;padding: 2px 5px;}
    .onglets li.active{cursor:normal;z-index:100;background: url(http://pix.toile-libre.org/upload/original/1311878947.png) no-repeat;}
    .overlay{width:100%; height:100%;}
    .paneltop{background: url(http://pix.toile-libre.org/upload/original/1311884495.png) no-repeat; height:6px}

/*===============EDITER CSS A PARTIR D'ICI=======================================*/
 .annonces h2{color:#000;}
    .annonces{background:url(http://pix.toile-libre.org/upload/original/1313417713.jpg) 50% 50% no-repeat;}
    .annonces .cadrenoir, .predef .cadrenoir {margin:1em 2em;}
    .staff{background:url(http://i20.servimg.com/u/f20/14/80/63/09/fon16.jpg) 50% 50% no-repeat;}
    .predef{background:url(http://pix.toile-libre.org/upload/original/1319392829.png) 50% 50% no-repeat;}
    .meteo div{margin:0 38%;}
    .meteo img, .meteo p{float:left; margin:0}
    .meteo span{font-size:20px; font-weight:bold;}
    .texte{clear:both;}
    .floatL{float:left;}
    .floatR{float:right;}
    .avatar li{padding:0 10px;}
    .predef .avatar li{padding:10px;cursor:pointer}
    .predef .avatar{width:480px}

    .info{background:#2e2e2e;}
    .info ul{display:none;}
    .info .init{display:block;font-size:1.5em}

    .staff .info{position:absolute; border:solid 1px #000;  top:25%; left:25%;}
    .predef .info{width:330px;}

    .clear{clear:both;height:50px}
	.col{width:220px;}
	.col.big{width:400px;}
	.col.img li{padding: 5px 0;}
	ul li ul{padding:0}
</style>
<body>
    <div class="pannel">
        <ul class="onglets">
            <li id="1">Bienvenue</li>
            <li id="2">Staff</li>
            <li id="3"">A pourvoir</li>
            <li id="4" style="display:none">Crédits</li>
        </ul>
        <div class="show">
            <div class="full annonces" style="display:none">
               <div class="overlay">
                                        <h2 style="padding-bottom: 0">BIENVENUE</h2>
                        <!-- ===========IMAGES COIN ============ -->
                    <div style="position: absolute;top: 9px; width: 100%;left:0px;"><img alt="" class="left" src="http://pix.toile-libre.org/upload/original/1313355982.png" /><img alt="" class="right" src="http://pix.toile-libre.org/upload/original/1313356028.png" /></div>

                        <!-- ========== EDITER A PARTR D'ICI ======= -->

                    <div class="cadrenoir">
                        <div class="col floatL">
                        	<ul style="margin-top:0;padding-top:0">
                        		<li><h3>Règlement</h3>
                        			<ul>
                        				<li><a href="http://www.nickron-renaissance.com/t2-reglement-du-forum" target="_blank">Règlement général</a></li>
                        				<li><a href="http://nickron-renaissance.com/t3-signature-du-reglement" target="_blank" >Signature du règlement</a></li>
                        			</ul>
                        		</li>
                        		<li><h3>Histoire & contexte</h3>
                        			<ul>
                        				<li><a href="http://www.nickron-renaissance.com/t12-synopsis-du-passe">Synopsis</a></li>
                        				<li><a href="http://www.nickron-renaissance.com/t1-renaissance-de-nickron" target="_blank">Renaissance</a></li>
                        			</ul>
                        		</li>
                        		<li><h3>Guides</h3>
                        			<ul>
                        				<li><a href="http://www.nickron-renaissance.com/t14-carte-du-monde-et-situation-politique" target="_blank">Carte du monde</a></li>
                        				<li><a href="http://www.nickron-renaissance.com/t11-qu-est-ce-qu-un-mutant-evolutions" target="_blank">Qu'est ce qu'un mutant ?</a></li>
                        				<li><a href="http://www.nickron-renaissance.com/t13-plans-de-l-ecole" target="_blank">Plans de l'école</a></li>
                        				<li><a href="http://www.nickron-renaissance.com/t10-les-differents-groupes" target="_blank">Les différents groupes</a></li>
                        				<li><a href="http://www.nickron-renaissance.com/t142-liste-de-dons-existants" target="_blank">Liste des dons existants</a></li>
<li><a href="http://nickron-renaissance.meilleurforum.net/t156-les-dirigeants-politiques" target="_blank">Les Dirigeants politiques</a></li>

                        			</ul>
                        		</li>
                        	</ul>
                        </div>
                        <div class="col big floatL">
							<img src="http://pix.toile-libre.org/upload/original/1318712943.png" alt="" />

                        	<div class="texte floatL" style="clear:none;width:245px">
                        		<h3>Event 1 : Une question de confiance.</h3>
                        		<p>Preview : Guide sur l'économie et armes.
                        		</p>
                        	</div>
                        		<div class="texte">
	                        		<h3>News <a href="http://nickron-renaissance.meilleurforum.net/t154-news-hebdomadaires#775" target="_blank">*</a></h3>
		                        	<ul style="font-size:11px;"></h3>
<li>- Présentations des dirigeants politiques ! (20/10/2011) : <a href="http://www.nickron-renaissance.com/t156-les-dirigeants-politiques#782" target="_blank">cliquez ici</a></li>
		                        		<li>- Plan de l'école mis en ligne ! (16/10/2011) : <a href="http://www.nickron-renaissance.com/t13-plans-de-l-ecole" target="_blank">cliquez ici</a></li>

<li>- Mise en place du cadre des partenaires et annuaires sous la page d'accueil (15/10/2011).</li>
										<li>- Créations d'une liste des dons existants (15/10/2011) : <a href="http://www.nickron-renaissance.com/t142-liste-de-dons-existants#734" target="_blank">cliquez ici</a></li>
										<li>- 7 personnages prédéfinis sont dorénavant disponibles ! (05/10/2011) <a href="http://www.nickron-renaissance.com/t127-personnages-predefinis" target="_blank">cliquez ici</a></li>
		                        	</ul>
                        		</div>
                        </div>
                        <div class="col img floatL">
                        	<ul style="padding-left:25px; padding-top:0">
                        		<li style="padding-top:0"><a href="http://www.nickron-renaissance.com/f11-galeries-d-avatars" target="_blank"><img src="http://pix.toile-libre.org/upload/original/1318707999.jpg" /></li>
                        		<li><a href="http://www.nickron-renaissance.com/t7-avatars-pris" target="_blank"><img src="http://pix.toile-libre.org/upload/original/1318708082.jpg" alt="" /></li>
                        		<li><a href="#" target="_blank"><img src="http://pix.toile-libre.org/upload/original/1318708124.jpg" alt="" /></li>
                        		<li><a href="http://www.nickron-renaissance.com/t126-i-liste-des-postes-a-pouvoir-i" target="_blank"><img src="http://pix.toile-libre.org/upload/original/1318708176.jpg" alt="" /></a></li>
                        	</ul>
							<div class="meteo">
                                <img src="http://i40.servimg.com/u/f40/14/80/63/09/2611.png" alt="" style="padding:0px 5px;">
                                <p>
                                    <span>Météo</span><br>
                                    Nuageux, 16°c<br>
                                </p>
                        	</div>
                        </div>
                    </div>
<!-- =====FIN PARTIE EDITABLE === -->
                </div>
            </div>
            <div class="full staff" style="display:none;" >
                <div class="overlay">
                    <h2>STAFF</h2>
                    <div style="position: absolute; top: 9px; width: 100%;left:0px;"><img alt="" class="left" src="http://pix.toile-libre.org/upload/original/1313355982.png" /><img alt="" class="right" src="http://pix.toile-libre.org/upload/original/1313356028.png" /></div>

<!-- ========== EDITER A PARTR D'ICI ======= -->

                    <div class="cadrenoir">
                   		<ul class="avatar" style="overflow:hidden;">
							<li class="floatL"><a href="http://nickron-renaissance.com/u1"><img alt="" src="http://pix.toile-libre.org/upload/original/1315481267.jpg"  onmouseover="showStaff($(this),'angelique',event)" /></a></li>
							<li class="floatL"><a href="http://nickron-renaissance.com/u2"><img alt="" src="http://pix.toile-libre.org/upload/original/1315481157.jpg"  onmouseover="showStaff($(this),'yoje',event)" /></a></li>
							<li class="floatL"><a href="http://nickron-renaissance.com/u4"><img alt="" src="http://pix.toile-libre.org/upload/original/1315481293.jpg"  onmouseover="showStaff($(this),'karl',event)" /></a></li>
							<li class="floatL"><a href="http://nickron-renaissance.com/u3"><img alt="" src="http://pix.toile-libre.org/upload/original/1315481254.jpg"  onmouseover="showStaff($(this),'ambre',event)" /></a></li>
							<li class="floatL"><a href="http://nickron-renaissance.com/u6"><img alt="" src="http://pix.toile-libre.org/upload/original/1315481280.jpg"  onmouseover="showStaff($(this),'nolan',event)" /></a></li>
						</ul>
                        <div class="texte">
                        	<p style="margin-top:5%">
                        		L'équipe administrative de NickroN sont des joueuses et des joueurs bénévoles qui mettent tout en œuvre pour rendre ce forum agréable et attractif.
								Cette équipe appelée « Staff » est reconnaissable par le rang qui se trouve en dessous de leur pseudo. N'hésitez surtout pas à contacter un des membres du staff si vous avez des questions ou une demande à formuler.
							</p>
							<p>
								Il existe plusieurs grades dans l'administration de NickroN. Le fondateur est celui qui a crée le forum et qui aura le dernier mot sur tout. Il est secondé par des administrateurs ainsi que des modérateurs qui veillent à ce que le forum reste clair le plus possible.
								Ces membres sont choisis pour leur confiance et leurs compétences dans certains domaines. Il n'y a pour l'instant aucun recrutement. Les rôles pourront être modifiés au fil du temps selon la fréquentation du forum.
							</p>
                        </div>
                         <div class="info" style="display:none">
                         	<ul class="angelique">
								<li>Pseudo : Angélique</li>
								<li>Role Rp : AI</li>
								<li>Rang : Fondateur</li>
							</ul>
                         	<ul  class="yoje">
								<li>Pseudo : Yojé Ahinilla</li>
								<li>Role Rp : Directeur de NickroN</li>
								<li>Rang : Administrateur</li>
							</ul>
                         	<ul  class="karl">
								<li>Pseudo : Karl Shneider</li>
								<li>Role Rp : Professeur</li>
								<li>Rang : Administrateur</li>
							</ul>
                         	<ul  class="ambre">
								<li>Pseudo : Ambre Balsey</li>
								<li>Role Rp : Professeur</li>
								<li>Rang : Administrateur</li>
							</ul>
                         	<ul  class="nolan">
								<li>Pseudo : Nolan L. Crowley</li>
								<li>Role Rp : Professeur</li>
								<li>Rang : Modératrice</li>
							</ul>
                         </div>
                    </div>
<!-- =====FIN PARTIE EDITABLE === -->
                </div>
            </div>
            <div class="full predef" style="display:none;">
            <div class="overlay">
                <h2>PERSONNAGES PREDEFINIS</h2>
                <div style="position: absolute; top: 9px;; width: 100%;left:0px;"><img alt="" class="left" src="http://pix.toile-libre.org/upload/original/1313355982.png" /><img alt="" class="right" src="http://pix.toile-libre.org/upload/original/1313356028.png" /></div>
<!-- ========== EDITER A PARTR D'ICI ======= -->
                <div class="cadrenoir">
                	<ul class="avatar floatL" style="overflow:hidden;">
							<li class="floatL"><img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef15.png"  onclick="showPredef($(this).parent().index())" /></li>
							<li class="floatL"><img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef12.png"  onclick="showPredef($(this).parent().index())" /></li>
							<li class="floatL"><img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef11.png"  onclick="showPredef($(this).parent().index())" /></li>
							<li class="floatL"><img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef10.jpg"  onclick="showPredef($(this).parent().index())" /></li>
							<li class="floatL" style="opacity:0.1; cursor:default"><img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef13.png" /></li>
							<li class="floatL"><img alt="" src="http://i40.servimg.com/u/f40/14/80/63/09/chloe_12.jpg"  onclick="showPredef($(this).parent().index())" /></li>
							<li class="floatL"><img alt="" src="http://i40.servimg.com/u/f40/14/80/63/09/akio_p10.jpg"  onclick="showPredef($(this).parent().index())" /></li>
							<li class="floatL"><img alt="" src="http://pix.toile-libre.org/upload/original/1317850444.jpg"  onclick="showPredef($(this).parent().index())" /></li>
					</ul>
                    <div class="texte floatL" style="clear:none;margin:1em 0;">
						<div class="info">
							<ul class="init active">
								<li>Retrouvez ici toutes les informations sur les personnages prédéfinis du forum.</li>
								<li>Pour cela il vous suffit de cliquer sur l'un des avatars</li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef15.png" />
                         			<p>** Alexander James Fisher **</p>
                         		</li>
								<li>Nom : Alexander James Fisher</li>
								<li>Âge : 18 ans</li>
								<li>Groupe : Elève</li>
								<li>Don : Alexander contrôle son sang. Il est capable de le rendre incroyablement fluide, ou de le faire durcir, offrant ainsi une résistance incroyable à son corps...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#662">Lire la suite</a></li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef12.png" />
                         			<p>** Eliott Armance Fergusson **</p>
                         		</li>
								<li>Nom : Eliott Armance Fergusson</li>
								<li>Âge : 17 ans</li>
								<li>Groupe : Elève</li>
								<li>Don : Eliott a fini par devenir un très bon dessinateur. Son pouvoir est tiré de ce don qu'il a : ce qu'Eliott dessine peut prendre vie s'il le désire...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#663">Lire la suite</a></li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef11.png" />
                         			<p>** Harmony Joy Fisher **</p>
                         		</li>
								<li>Nom : Harmony Joy Fisher</li>
								<li>Âge : 18 ans</li>
								<li>Groupe : Elève</li>
								<li>Don : Ses bras bandés cachent de graves stigmates qui peuvent empoisonner quiconque serait touché par Harmony. Elle a le pouvoir de dégager un gaz hautement toxique...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#664">Lire la suite</a></li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef10.jpg" />
                         			<p>** Calliopée Grace White **</p>
                         		</li>
								<li>Nom : Calliopée Grace White</li>
								<li>Âge : 18 ans</li>
								<li>Groupe : Elève</li>
								<li>Don : Calliopée a le pouvoir de se fondre dans le décor et de disparaître totalement aux yeux de tous. Elle a hérité de l'instinct des caméléons...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#665">Lire la suite</a></li>
							</ul>
                         	<ul style="visibility:hidden">
                         		<li style="text-align:center">
                         			<img alt="" src="http://i26.servimg.com/u/f26/10/06/30/17/pradef13.png" />
                         			<p>** Raphaël Nate Sevensson **</p>
                         		</li>
								<li>Nom : Raphaël Nate Sevensson</li>
								<li>Âge : En construction...</li>
								<li>Groupe : Elève</li>
								<li>Don : En construction...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#666">Lire la suite</a></li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://i40.servimg.com/u/f40/14/80/63/09/chloe_12.jpg" />
                         			<p>** Chloé Shneider **</p>
                         		</li>
								<li>Nom : Chloé Shneider</li>
								<li>Âge : 26 ans</li>
								<li>Groupe : Mutants rebelles</li>
								<li>Don : Chloé a un don dangereux pour les autres mutants. Elle a la capacité d’ôter le don des autres mutants se trouvant à proximité d’elle...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#667">Lire la suite</a></li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://i40.servimg.com/u/f40/14/80/63/09/akio_p10.jpg" />
                         			<p>** Akio Tano **</p>
                         		</li>
								<li>Nom : Akio Tano</li>
								<li>Âge : 14 ans</li>
								<li>Groupe : Elève</li>
								<li>Don : Le corps d'Akio est entièrement composé de nano-robot. Ce don lui permet d’entrer en contact avec n’importe quel matériel électronique tout en parvenant parfois à le contrôler...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#668">Lire la suite</a></li>
							</ul>
                         	<ul>
                         		<li style="text-align:center">
                         			<img alt="" src="http://pix.toile-libre.org/upload/original/1317850444.jpg" />
                         			<p>** Rose McDown **</p>
                         		</li>
								<li>Nom : Rose McDown</li>
								<li>Âge : 21 ans</li>
								<li>Groupe : Membre du personnel</li>
								<li>Don : Rose a la faculté de dégager des molécules de morphine. Celle-ci permet aux personnes souffrantes de ne plus ressentir la douleur malgré les nombreux effets indésirables...</li>
								<li><a href="http://nickron-renaissance.meilleurforum.net/t127-personnages-predefinis#669">Lire la suite</a></li>
							</ul>
						</div>
                    </div>
                </div>
<!-- =====FIN PARTIE EDITABLE === -->
                </div>
            </div>
            <div class="full" style="display:none;background:#001212">
                <div class="overlay">
                <h2>TEST</h2>
                <div style="position: absolute; top: 9px;; width: 100%;left:0px;"><img alt="" class="left" src="http://pix.toile-libre.org/upload/original/1313355982.png" /><img alt="" class="right" src="http://pix.toile-libre.org/upload/original/1313356028.png" /></div>
<!-- ========== EDITER A PARTR D'ICI ======= -->
                    <div class="cadrenoir">
                        <div class="texte">
                        </div>
                    </div>
<!-- =====FIN PARTIE EDITABLE === -->
                </div>
            </div>
            <div class="full" style="display:none;background:#001212">
                <div class="overlay">
                <h2>TEST</h2>
                <div style="position: absolute; top: 9px;; width: 100%;left:0px;"><img alt="" class="left" src="http://pix.toile-libre.org/upload/original/1313355982.png" /><img alt="" class="right" src="http://pix.toile-libre.org/upload/original/1313356028.png" /></div>
<!-- ========== EDITER A PARTR D'ICI ======= -->
                    <div class="cadrenoir">
                        <div class="texte">
                        </div>
                    </div>
<!-- =====FIN PARTIE EDITABLE === -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>